﻿<template>
  <div class="inventory-report-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">馃摝 库存报表分析</span>
          <div class="header-actions">
            <el-select v-model="warehouseId" placeholder="选择仓库" size="small" style="width: 150px;">
              <el-option label="全部仓库" value="" />
              <el-option label="主仓库" value="1" />
              <el-option label="分仓A" value="2" />
              <el-option label="分仓B" value="3" />
            </el-select>
            <el-button type="primary" @click="handleRefresh">刷新</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20" class="kpi-row">
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #667eea;">
            <div class="kpi-label">库存总量</div>
            <div class="kpi-value">{{ totalStock.toLocaleString() }}</div>
            <div class="kpi-trend">SKU: {{ totalSKU }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #f56c6c;">
            <div class="kpi-label">预警商品</div>
            <div class="kpi-value warning">{{ warningStock }}</div>
            <div class="kpi-trend">需要补货</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #e6a23c;">
            <div class="kpi-label">滞销商品</div>
            <div class="kpi-value">{{ slowMoving }}</div>
            <div class="kpi-trend">90天未销售</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #67c23a;">
            <div class="kpi-label">周转天数</div>
            <div class="kpi-value">{{ turnoverDays }}天</div>
            <div class="kpi-trend">较上月-3天</div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃搳 库存周转分析</span>
            </template>
            <div class="chart-container" ref="turnoverChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>鈿狅笍 库存预警分布</span>
            </template>
            <div class="chart-container" ref="warningChart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <div class="section-header">
            <span>馃搵 库存明细数据</span>
            <el-input v-model="searchKeyword" placeholder="搜索商品" clearable style="width: 300px;" size="small" />
          </div>
        </template>
        <el-table :data="inventoryData" border stripe>
          <el-table-column prop="productName" label="商品名称" width="200" />
          <el-table-column prop="sku" label="SKU编码" width="150" />
          <el-table-column prop="stock" label="库存数量" width="100">
            <template #default="{ row }">
              <el-tag :type="getStockTag(row.stock, row.minStock)">{{ row.stock }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="minStock" label="最低库存" width="100" />
          <el-table-column prop="maxStock" label="最高库存" width="100" />
          <el-table-column prop="cost" label="成本价" width="100">
            <template #default="{ row }">
              楼{{ row.cost }}
            </template>
          </el-table-column>
          <el-table-column prop="totalValue" label="库存金额" width="120">
            <template #default="{ row }">
              楼{{ (row.stock * row.cost).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="turnoverDays" label="周转天数" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTag(row.status)">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const warehouseId = ref('')
const searchKeyword = ref('')
const totalStock = ref(156789)
const totalSKU = ref(2345)
const warningStock = ref(23)
const slowMoving = ref(45)
const turnoverDays = ref(32)

const inventoryData = ref([
  { productName: 'iPhone 15 Pro', sku: 'IP15P-001', stock: 145, minStock: 50, maxStock: 500, cost: 5999, turnoverDays: 15, status: '正常' },
  { productName: 'MacBook Pro', sku: 'MBP-001', stock: 23, minStock: 30, maxStock: 200, cost: 12999, turnoverDays: 25, status: '预警' },
  { productName: 'iPad Air', sku: 'IPA-001', stock: 189, minStock: 40, maxStock: 300, cost: 3899, turnoverDays: 120, status: '滞销' }
])

const turnoverChart = ref(null)
const warningChart = ref(null)

onMounted(() => {
  initTurnoverChart()
  initWarningChart()
})

const initTurnoverChart = () => {
  const chart = echarts.init(turnoverChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['周转天数', '库存金额'] },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
    yAxis: [
      { type: 'value', name: '周转天数' },
      { type: 'value', name: '金额(万元)' }
    ],
    series: [
      { name: '周转天数', type: 'line', data: [35, 33, 34, 32, 31, 33, 32], itemStyle: { color: '#667eea' } },
      { name: '库存金额', type: 'bar', yAxisIndex: 1, data: [856, 923, 967, 890, 945, 978, 1023], itemStyle: { color: '#4facfe' } }
    ]
  })
}

const initWarningChart = () => {
  const chart = echarts.init(warningChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      name: '库存状态',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 2123, name: '正常', itemStyle: { color: '#67c23a' } },
        { value: 145, name: '偏低', itemStyle: { color: '#e6a23c' } },
        { value: 23, name: '预警', itemStyle: { color: '#f56c6c' } },
        { value: 45, name: '滞销', itemStyle: { color: '#909399' } },
        { value: 9, name: '缺货', itemStyle: { color: '#f56c6c' } }
      ]
    }]
  })
}

const getStockTag = (stock, minStock) => {
  if (stock === 0) return 'danger'
  if (stock < minStock) return 'warning'
  return 'success'
}

const getStatusTag = (status) => {
  const map = { '正常': 'success', '预警': 'warning', '滞销': 'info', '缺货': 'danger' }
  return map[status] || 'info'
}

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.inventory-report-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  padding: 24px;
  background: white;
  border-radius: 8px;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.kpi-value.warning {
  color: #f56c6c;
}

.kpi-trend {
  font-size: 14px;
  color: #606266;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 400px;
}
</style>
